<template>
    <div class="authenbox">
        <div class="inquirebox">
            <el-input v-model="tabedata.user.idorname" placeholder="请输入核检人姓名" />
            <el-button type="primary" class="botton"  @click="inquire">查询</el-button>
            <el-button type="success" @click="toadd">添加</el-button>
            <el-button type="danger" @click="dels">批量删除</el-button>
        </div>
        <div >
            <froms :tableData="datalist.listdata" :tableHeader="tableHeader" @upisuse="upisuse" @updata="updata" @deldata="deldata" @delAll="delAll" class="ding" />
            <div class="tablebox">
                <tables :currentPage="tabedata.user.page" :pageSize="tabedata.user.pageSize" :totalNum="total" @changePageSize="changePageSize" @changePage="changePage" />
            </div>
            
        </div>
        
    </div>
</template>

<script setup lang="ts">
import { ref ,reactive,onMounted } from 'vue'
import { authenlist , delauthen ,upisuses} from '../../api/admin3';
import tables from '../../components/table/paging.vue'
import { ElMessage } from 'element-plus'
import froms from '../../components/from/from.vue'
import { useRouter } from 'vue-router';
const router = useRouter();

interface users{
    page:number,
    pageSize:number,
    idorname:string,
    mobile:string
}
interface datauser{
    user:users
}

const tabedata=reactive<datauser>({
    user:{
        page:1,
        pageSize:10,
        idorname:'',
        mobile:''
    }
})
let datalist=reactive<any>({
    listdata:[]
})
const tableHeader=ref<Array<any>>([
        {
            label:'核销人姓名',
            prop:'reviewer_name'
        },
        {
            label:'手机号',
            prop:'mobile'
        },
        {
            label:'部门',
            prop:'deparmentname'
        },
        {
            label:'职务',
            prop:'job'
        },
        {
            label:'是否启用',
            prop:'is_use',
            type:'switch',
            event: 'upisuse'
        },
        {
        label:'操作',
        type:'button',
        buttons:[
            {
                text: '修改',
                event: 'updata',
                type: 'success',
                show: true,
            },
            {
                text: '删除',
                event: 'deldata',
                type: 'danger',
                show: true,
            },
        ]
        }
    ])

let total =ref<number>(0)
const getData= async()=>{
    const res:any=await authenlist(tabedata.user)
    console.log(res)
    if(res.code==10000){
        datalist.listdata=res.data.list
        total=res.data.total
        console.log(datalist.listdata,'列表数据');

        
    }
}
let ids=reactive<any>([])
const delAll=async(val:any)=>{
    ids=val.map((item:any)=>{
        return item.id
    })
    ids = ids.map(String).join(',');
    
}


const dels=async()=>{
    console.log(ids)
    let res :any =await delauthen({id:ids})
    console.log(res)
    if (res && res.code === 10000) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        getData()
    } else {
        ElMessage({
            message: res.message,
            type: 'error',
        })
    }
}
const upisuse=async(val:any)=>{
    console.log(val)
    let res:any=await upisuses({
        id:val.id,
        is_use:val.is_use
    })
    if (res && res.code === 10000) {
        ElMessage({
            message: '修改状态成功',
            type: 'success',
        })
    } else {
        ElMessage({
            message: res.message,
            type: 'error',
        })
    }
}

const updata=(val:any)=>{
    console.log(val)
    router.push({
        path: '/authenadd',
        query: {
        userlist: JSON.stringify(val)
        }
    })

}

const deldata=async(val:any)=>{
    console.log(val.id)
    let res :any =await delauthen({id:val.id})
    console.log(res)
    if (res && res.code === 10000) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        getData()
    } else {
        ElMessage({
            message: res.message,
            type: 'error',
        })
    }


}
const input = ref('')

const changePageSize=(val:any)=>{
    tabedata.user.pageSize=val
  getData()
  // console.log(val)
}
const changePage=(val:any)=>{
    tabedata.user.page=val
  getData()
  // console.log(val)
}
const inquire=()=>{
    tabedata.user.page=1
    tabedata.user.pageSize=10
    getData()
}
const toadd=()=>{
    router.push('/authenadd')
}
onMounted(()=>{
    getData()
})
</script>

<style scoped lang="less">
.authenbox{
    width: 100%;
    height: 100%;
    // background-color: rebeccapurple;
    .ding{
        margin-left: 20px;
        margin-top: 20px;
    }
    .inquirebox{
        width: 450px;
        height: 35px;
        // background-color: rebeccapurple;
        margin-top: 50px;
        margin-left: 20px;
        margin-right: 30px;
        display: flex;
        .el-input{
            height: 30px;
        }
        .botton{
            margin-left: 20px;
           
        }
    }
}
.tablebox{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    margin-top: 20px;
}
</style>